<template>
  <view v-if="userAvatar" class="comment paddLR">
    <!-- 评论标题 -->
    <view class="comment-tit">
      <text class="f28 b color-000">评论</text>
      <text class="color-888 f22 ml15">({{ commentCount }}条)</text>
    </view>

    <!-- 发布评论表单 -->
    <form>
      <view class="form flex-lect">
        <image :src="userAvatar" class="img70" mode="aspectFit"></image>
        <view class="flex-1 ml15">
          <input
            type="text"
            class="text"
            placeholder="说点什么"
             @focus="updateShow()"
          />
          <!-- <input
            type="text"
            v-model="content"
            :focus="isReplying"
            class="text"
            :placeholder="getPlaceholder"
            @focus="onFocus"
            @blur="onBlur"
             @confirm="handleSubmit"
          /> -->
        </view>
        <!-- <view class="submit-btn" @click="handleSubmit">提交</view> -->
      </view>
    </form>

    <!-- 评论列表 -->
    <view class="comment-list">
      
      <view v-for="(item, index) in commentList" :key="item.id" class=" item">
        <view class="flex-be">
          <!-- 用户头像 -->
          <image :src="item.avatar_desc" class="img70" mode="aspectFit"></image>
          <view class="div flex-1 ml15">
            <!-- 用户名和时间 -->
            <view class="color-888 flex-bect">
              <text class="name f24">{{ item.nickname }}</text>
            </view>
            <!-- 评论内容及回复按钮 -->
            <view class="intro">
              <view class="t mb10">{{ item.content }}</view>
              <view v-if="item.images_desc && item.images_desc.length > 0" class="flex-lect img-list">
                <view v-for="(items, imgIdx) in item.images_desc" :key="imgIdx" class="img-item">
                  <image :src="items" mode="aspectFill" class="img"></image>
                </view>
              </view>
              <view class="flex-bect">
                <text class="color-999 mr15">{{item.createtime_desc}}</text>
                <text class="color-999" @click.stop="updateShow(item.id)">回复</text>
                <view class="flex-1"></view>
                <view @click="dianzan(item, index, -1)">
                  <u-icon v-if="item.like_count === 0" size="32" name="thumb-up" color="#999"></u-icon>
                  <u-icon v-else name="thumb-up-fill" size="32" color="#05B196"></u-icon>
                </view>
              </view>
              
            </view>
          </view>
          
        </view>
        <!-- 回复区  -->
        <!-- {{item.commentShow}}  {{item.commentList.length}} =={{commentIsLast}} -->
        <view v-show="item.commentShow && item.commentList.length > 0">
          <view v-for="(childItem, childIdx) in item.commentList" :key="item.id" class=" item">
            <view class="flex-be">
              <!-- 用户头像 -->
              <image :src="childItem.from_user.avatar_desc" class="img70" mode="aspectFit"></image>
              <view class="div flex-1 ml15">
                <!-- 用户名和时间 -->
                <view class="color-888 flex-lect">
                  <text class="name f24 mr10">{{ childItem.from_user.nickname }}</text>
                  <template v-if="childItem.to_user">
                    <u-icon name="play-right-fill" size="14" color="#999"></u-icon>
                    <text class="name f24 ml10">{{ childItem.to_user.nickname }}</text>
                  </template>
                </view>
                <!-- 评论内容及回复按钮 -->
                <view class="intro">
                  <view class="t mb10">{{ childItem.content }}</view>
                  <view class="flex-lect img-list" v-if="childItem.images_desc && childItem.images_desc.length > 0">
                    <view v-for="(items, imgIdx) in childItem.images_desc" :key="imgIdx" class="img-item">
                      <image :src="items" mode="aspectFill" class="img"></image>
                    </view>
                  </view>
                  <view class="flex-bect">
                    <text class="color-999 mr15">{{childItem.createtime_desc}}</text>
                    <text class="color-999" @click.stop="updateShow(item.id)">回复</text>
                    <view class="flex-1"></view>
                    <view @click="dianzan(childItem, index, childIdx)">
                      <u-icon v-if="childItem.like_count === 0" size="32" name="thumb-up" color="#999"></u-icon>
                      <u-icon v-else name="thumb-up-fill" size="32" color="#05B196"></u-icon>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        
        <view class="flex-lect u-m-l-80" v-show="item.comments > 0 || item.commentShow">
          <view class="num color-999" @click="getSubList(item, index)">
            <text class="mr10">
              <template v-if="item.commentShow && item.commentIsLast">--没有更多~</template>
              <template v-else-if="item.commentIsLast">--展开{{item.comments}}条回复</template>
              <template v-else>--展开{{item.comments - item.commentList.length}}条回复</template>
            </text>
            <u-icon v-if="!(item.commentShow && item.commentIsLast)" name="arrow-down" color="#999"></u-icon>
          </view>
          
          <view v-if="item.commentShow" class="flex-lect ml60" @click="hideSubList(item, index)">
            <text class="color-999 mr10">收起</text>
            <u-icon name="arrow-up" color="#999"></u-icon>
          </view>
        </view>
        
        
      </view>
      
      <!-- <comment-item
        v-for="comment in commentList"
        :key="comment.id"
        :item="comment"
        :depth="0"
        :max-depth="3"
      /> -->
    </view>

    <!-- 提示语 -->
    <view v-if="commentList.length === 0" class="tips">来抢首评，留下你的想法~</view>
    <view v-else class="tips">到底啦~~~</view>
    
    <uu-emoji-input v-model="showInput" ref="emojiRef"  @submit="handleSubmit" />
  </view>
</template>

<script>

export default {
  name: 'CommentBox',
  props: {
    type: {
      type: Number,
      default: 0
    },
    infoId: {
      type: [Number, String],
      default: 0
    },
  },
  data() {
    return {
      content: '',
      showInput: false,
      commentList:[],
      page:1,
      isLast:false,
      parent_id:'',
      commentCount:0,
      userAvatar:''
    }
  },
  created() {
    this.getCommentList();
    this.userAvatar = this.$store.state.vuex_user.avatar;
  },
  computed: {
    // 从Vuex获取回复状态
    replyId() {
      return this.$store.state.vuex_comment_replyId
    },
    isReplying() {
      return this.$store.state.vuex_comment_isReplying
    },
    replyName(){
      return this.$store.state.vuex_comment_replyName
    },
    // 动态生成占位符文本
    getPlaceholder() {
      return this.replyId ? `回复 #${this.replyName}...` : this.placeholder 
      
    }
  },
  methods: {
    // 收起
    
    hideSubList(item, index){
      this.commentList[index].commentShow = false;
      const list1 = this.commentList.filter((n, i) => i < index);
      const list2 = this.commentList.filter((n, i) => i > index);
      console.log('this.commentList---', this.commentList)
    },
    getSubList(item, index){
      if(item.commentIsLast) {
        this.commentList[index].commentShow = true;
        return;
      }
      const apiFun = this.type == 2 ? this.$api.foodSubCommentListApi : this.$api.travelSubCommentListApi; 
      apiFun({page: item.commenPage, parent_id: item.id}).then(res=>{
        if(!res.data) return;
        if(res.data.data && res.data.data.length > 0){
          this.commentList[index].commentList = [...this.commentList[index].commentList, ...res.data.data];
          this.commentList[index].commentShow = true;
        }
        if(item.commenPage === res.data.last_page || res.data.last_page == 0){
          item.commentIsLast = true
        }else{
          item.commentIsLast = false
          this.commentList[index].commenPage++;
        }
      })
    },
    // 点赞
    dianzan(item, idx1, idx2){
      let apiFun;
      let datas = {comment_id: item.id}
      if(this.type == 2){
        if(idx2 > -1){
          apiFun = this.$api.foodSubCommentLikesApi;
        }else{
          apiFun = this.$api.foodCommentLikesApi;
        }
      }else{
        if(idx2 > -1){
          apiFun = this.$api.travelSubCommentLikesApi;
        }else{
          apiFun = this.$api.travelCommentLikesApi;
        }
      }
      
      apiFun(datas).then(res=>{
        const like_count = item.like_count == 1 ? 0 : 1;
        if(idx2 > -1){
          this.commentList[idx1].commentList[idx2].like_count = like_count
        }else{
          this.commentList[idx1].like_count = like_count
        }
        
        uni.showToast({title: like_count == 1 ? '点赞成功' : '取消点赞', icon:'none'});
      })
    },
    getCommentList(){
      console.log('this.userAvatar--------------', this.userAvatar)
      if(!this.userAvatar) return;
      const apiFun = this.type == 2 ? this.$api.foodCommentListApi : this.$api.travelCommentListApi;
      const _data = this.type == 2 ? {food_id: this.infoId} : {activity_id: this.infoId}
      console.log('this.type----', this.type, _data)
      apiFun({..._data, page: this.page}).then(res=>{
        if(!res.data) return;
        if(res.data.data && res.data.data.length > 0){
          this.commentList = [...this.commentList, ...res.data.data];
        }
        if(this.page === res.data.last_page || res.data.last_page == 0){
          this.isLast = true
        }else{
          this.isLast = false;
          this.page++;
        }
        this.$emit('isLast', this.isLast)
      })
    },
    
    
    updateShow(id) {
      this.showInput = true;
      if(id){
        this.parent_id = id
      }
      console.log('showInput === ', this.showInput);
    },
    onFocus() {
      this.$emit('focus')
    },
    onBlur() {
      this.$emit('blur')
    },
    handleSubmit(e) {
      let apiFun;
      let datas = {...e}
      if(this.type == 2){
        datas = { ...datas, food_id: this.infoId}
        if(this.parent_id){
          apiFun = this.$api.foodSubCommentApi;
          datas = {...e, parent_id: this.parent_id}
        }else{
          apiFun = this.$api.foodCommentApi;
        }
      }else{
        datas = { ...datas, activity_id: this.infoId}
        if(this.parent_id){
          apiFun = this.$api.travelSubCommentApi;
          datas = {...e, parent_id: this.parent_id}
        }else{
          apiFun = this.$api.travelCommentApi;
        }
      }
      console.log('datas------', datas)
      apiFun(datas).then(res=>{
        uni.showToast({title: res.msg, icon:'none'});
        this.$refs.emojiRef.clearInfo()
      })
    }
  }
}
</script>
    
    
<style scoped lang="scss">
.comment{
  .comment-tit{padding: 40rpx 0 36rpx;}
  .tips{color: #888; font-size: 24rpx; text-align: center; padding: 60rpx 0;}
  .text{background-color: #F5F6F8; border-radius: 40rpx; height: 64rpx; width: 100%; padding: 0 16rpx; font-size: 24rpx;}
  
  .comment-list{
    margin-top: 28rpx;
    .item{
      padding-bottom: 30rpx; border-bottom: 1px solid #ededed; margin-bottom: 20rpx;
      .item{margin-left: 85rpx; border: none; margin-bottom: 0; padding-bottom: 0;}
      .name{}
      .intro{margin-top: 8rpx; font-size: 26rpx; color: #000; margin-bottom: 20rpx;}
    }
  }
}
.img-list{flex-wrap: wrap; margin-bottom: 20rpx;}
.img-item{
  width: 32%; height: 200rpx; margin-right: 2%;
  &:nth-child(3n+3){margin-right: 0;}
  .img{width: 100%; height: 100%; display: block; margin-bottom: 16rpx;}
}

</style>